import { FC, useEffect, useState } from "react"
import Taro, { useRouter } from '@tarojs/taro'
import check from '../../resource/checked.png'
import uncheck from '../../resource/uncheck.png'
import prohibit from '../../resource/prohibit.png'
import style from './style.less'

const Payment: FC = () => {
  const router = useRouter()
  const amount = Number(router.params.amount)
  const order = router.params.order
  const cargoId = router.params.cargoId
  const type = Number(router.params.type)

  const [netting, setNetting] = useState(amount)
  const [discount, setDiscount] = useState(0)
  const [select, setSelect] = useState(3)
  const [coupons, setCoupons] = useState<any[]>([])

  useEffect(() => {
    Taro.request({
      url: 'http://10.190.84.29:9527/fta-trade/order/shipper/prePayCargoFee',
      method: 'POST',
      data: JSON.stringify({
        openId: Taro.getStorageSync('token'),
        orderNumber: order
      }),
      success: (data) => {
        console.log('查询折扣券', data);
        setCoupons(data.data.data.coupons)
      },
      fail: () => {
        console.log('查询折扣券失败');
      }
    })
  }, [])

  const handleChange = (num) => {
    if (num === 1) {
      if (coupons[0]?.couponId) {
        setSelect(1)
        amount * 0.05 > 200 ? (
          setNetting(amount - 200),
          setDiscount(200)
        ) : (
          setNetting(amount * 0.95),
          setDiscount(amount * 0.05)
        )
      }
    } else if (num === 2) {
      if (coupons[1]?.couponId) {
        setSelect(2)
        amount * 0.15 > 200 ? (
          setNetting(amount - 200),
          setDiscount(200)
        ) : (
          setNetting(amount * 0.85),
          setDiscount(amount * 0.15)
        )
      }
    } else if (num === 3) {
      setSelect(3)
      setNetting(amount)
      setDiscount(0)
    }
  }

  const pay = (couponId, num) => {
    Taro.navigateTo({ url: `/packageC/cashier/index?amount=${netting.toFixed(2)}&cargoId=${cargoId}&order=${order}&type=${type}&preferenceType=${num}&couponId=${couponId}` })
  }

  return (
    <div className={style.root}>
      <div className="amount">
        <div className="refound">
          <div>合计</div>
        </div>
        <div className="deposit">¥ {netting.toFixed(2)}</div>
        <div className="cargoFee">
          <div>总运费</div>
          <div>¥ {amount}.00</div>
        </div>
      </div>
      <div className="discount">
        <div className="title">折扣券</div>
        <div className="radio" onClick={() => { handleChange(1) }}>
          <img src={coupons[0]?.couponId ? select === 1 ? check : uncheck : prohibit} alt="" />
          <div>95折</div>
          {coupons[0]?.couponId ? <div>到期时间：{coupons[0]?.endTimeFormat}</div> : <div>暂无折扣券</div>}
        </div>
        <div className="radio" onClick={() => { handleChange(2) }}>
          <img src={coupons[1]?.couponId ? select === 2 ? check : uncheck : prohibit} alt="" />
          <div>85折</div>
          {coupons[1]?.couponId ? <div>到期时间：{coupons[1]?.endTimeFormat}</div> : <div>暂无折扣券</div>}
        </div>
        <div className="radio" onClick={() => { handleChange(3) }}>
          <img src={select === 3 ? check : uncheck} alt="" />
          <div>不使用优惠</div>
        </div>
      </div>
      <div className="final">
        <div className="cargoFee">
          <div>合计</div>
          <div>¥ {netting.toFixed(2)}</div>
        </div>
        <div className="cargoFee">
          <div>共省</div>
          <div>¥ {discount.toFixed(2)}</div>
        </div>
        <div className="computed">合计 = 总运费 * 折扣券（最多抵扣200元）</div>
      </div>
      <div className="pay" onClick={() => { pay(coupons[select - 1]?.couponId, select) }}>支付运费 {netting.toFixed(2)}元</div>
    </div>
  )
}

export default Payment